<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 因为这个图片地址是没问题的 -->
    <!-- 如果后台出现问题， 就会走下面的img1.onerror方法-->
    <img id="img1" src="http://p4.so.qhimg.com/t018349127914f495ce.jpg" alt="" srcset="">
</body>
</html>
<script>
    var img1 = document.getElementById('img1')
    var i = 0   //初始化图片加载失败请求次数
    // 图片一旦加载成功了的时候，就会调用这个函数
    img1.onload = function (param) { 
        console.log('图片加载成功')
     }
     //当每次图片加载失败了，都会调用这个函数
    img1.onerror = function (err) {
        if(i>10){           //图片加载失败函数是否调用超10次？如果超10次，就return
                            //避免无限制的发送请求
                        
            return
        }
        //在链接后面拼接'?'+Math.random()  是为了每次请求清除图片缓存,
        //避免再次请求的时候调用了上次无用的地址
        err.target.src = "http://p4.so.qhimg.com/t018349127914f495ce.jpg"+'?'+Math.random();
        i++   
    }
</script>